<template>
 <div id="login">
   <div class="head">
    <div class="title">甘肃人文在线展览平台后台管理系统</div>
    <div class="cover">
      <img src="../assets/img/head.gif" alt="">
    </div>
   </div>
   <div class="body">
     <div class="lefts">
       <img src="../assets/img/d.png" alt="">
     </div>
     <div class="right">
       <input type="text" class="name" v-model="name" placeholder="请输入用户名">
       <input type="password" class="pass" v-model="pass" placeholder="请输入密码" @keydown.enter="submit">
       <button @click="submit">登录</button>
     </div>
   </div>
 </div>
</template>
 
<script>
import {mapMutations, mapState} from "vuex"
export default {
  name: 'Login',
  data(){
    return{
      name:"",
      pass:""
    }
  },
  methods:{
    // vuex更新信息
    ...mapMutations(['updateAdminInfo']),
    // 登录
    async submit(){
      if(!this.name.trim()){
        return this.$message.warning("用户名不能为空哦")       
      }
      if(!this.pass.trim()){
        return this.$message.warning("密码不能为空哦")
      }
      let {data} = await this.$axios.post("/admin/login",{
        name:this.name,
        pass:this.pass
      })
      if(data.code)return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      this.updateAdminInfo(data.data)
      // 跳转
      this.$router.replace("/")
    }
  },
  computed:{
    ...mapState(['adminInfo'])
  },
  // 判断是否登录
  beforeRouteEnter(to,from,next){
    if(to.href!=="/login")return
    next(vm=>{  // 这里的vm相当于this
      if(!vm.adminInfo.name) return
      vm.$router.replace("/")
    })
  }
}
</script>

<style scoped lang='less'>
#login{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:url("../assets/img/bj.jpg");
  background-size: cover;
  .head{
    width: 690px;
    height: 120px;
    margin:0 auto;
    text-align: center;
    margin-top: 50px;
    .title{
      color: #fff;
      width: 690px;
      height: 60px;
      line-height: 60px;
      font-size: 23px;
    }
    .cover{
      width: 690px;
      height: 60px;
      img{
        width: 100%;
        height: 620px;
        margin-top: -290px;
      }
    }
  }
  .body{
    width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    .lefts{
      width: 380px;
      height: 380px;
      // overflow: hidden;
      -webkit-animation:rotation 15s linear infinite;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .right{
      width: 330px;
      height: 333px;
      background:url("../assets/img/e.png") no-repeat;
      background-size: cover;
      position: relative;
      input{
        position: absolute;
        left:50%;
        width: 210px;
        transform: translateX(-50%);
        margin-top: 100px;
        text-indent: 2em;
        height: 30px;
        outline: none;
        border: none;
        background: url("../assets/img/b.png") no-repeat;
        background-size: cover;
        color: #fff;
        &.pass{
           margin-top: 160px;
        }
      }
      button{
        margin-top: 220px;
        position: absolute;
        width: 210px;
        height: 30px;
        outline: none;
        border: none;
        cursor: pointer;
        left: 50%;
        transform: translateX(-50%);
        background: url("../assets/img/a.png") no-repeat;
        background-size: cover;
      }
      input::-webkit-input-placeholder { /* WebKit browsers */
      color: rgb(226, 225, 225) !important;   
      }     
      input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
      color: rgb(226, 225, 225) !important;  
      } 
      input::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: rgb(226, 225, 225) !important;  
      } 
      input::-ms-input-placeholder {    /* Internet Explorer 10+ */  
      color: rgb(226, 225, 225) !important; 
      }
    }
  }
  @keyframes rotation {
    0%{
      transform: rotate(0deg)
    }
    100%{
       transform: rotate(360deg)
    }
  }
}
</style>